<template>
    <div class="bill_table">
        <el-table :data="tabledata" style="width: 100%" height="100%">
            <el-table-column prop="date" label="时间" width="180">
                <template #default="scope">
                    <div class="font14">{{ scope.row.day }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="账号总输赢">
                <template #default="scope">
                    <div class="font14bold" :style="statusColor(scope.row.win_back)">¥{{ scope.row.win_back.toFixed(2)
                        }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="共享输赢">
                <template #default="scope">
                    <div class="font14bold" :style="statusColor(scope.row.share.win_back)">¥{{
                        scope.row.share.win_back.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="独享输赢">
                <template #default="scope">
                    <div class="font14bold" :style="statusColor(scope.row.exclusive.win_back)">¥{{
                        scope.row.exclusive.win_back.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="共享单有效金额">
                <template #default="scope">
                    <div class="font14bold">¥{{ scope.row.share.valid_amount.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="共享未结算">
                <template #default="scope">
                    <div class="font14bold">{{ scope.row.share.no_check_amount.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="共享取消单">
                <template #default="scope">
                    <div class="font14bold flexcolumn">
                        {{ scope.row.share.cancel_count}}单
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="独享单有效金额">
                <template #default="scope">
                    <div class="font14bold">¥{{ scope.row.exclusive.valid_amount.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="独享未结算">
                <template #default="scope">
                    <div class="font14bold">¥{{ scope.row.exclusive.no_check_amount.toFixed(2) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="独享取消单">
                <template #default="scope">
                    <div class="font14bold flexcolumn">
                        {{ scope.row.exclusive.cancel_count }}单
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
const props = defineProps({
    billdata: Object
})

const tabledata = computed(() => {
    let a = []
    Object.keys(props.billdata.day).forEach(key => {
        let item = props.billdata.day[key]
        item.day = key
        a.push(item)
    });
    return a
})

const statusColor = (value) => {
    let str = ''
    if (value >= 0) {
        str = 'color: #02a66e;'
    } else {
        str = 'color: #fb445f;'
    }

    return str
}
</script>

<style lang="scss" scoped>
.bill_table {
    width: 100%;
    margin: 16px 0;
    padding: 0 16px;
    height: calc(100% - 260px);
    flex: 1;
}

.font14 {
    font-size: 14px;
    color: #333;
}

.font14bold {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.flex {
    display: flex;
    align-items: center;
}

.flexcolumn {
    display: flex;
    flex-direction: column;
}
</style>

<style>
.bill_table thead tr th .cell {
    font-size: 14px;
    font-weight: 600;
    color: #8a8a8a;
}
</style>